<template>
  <div>
    <el-container style="height: 100vh; border: 1px solid #eee">
      <!-- 顶部导航栏 -->
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">
        <div class="header-left">
          <span>书缘校园-校园二手书交流系统</span>
        </div>
        <div class="header-right">
          <router-link to="/mySetting">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          </router-link>
        </div>
      </el-header>

      <el-container>
        <!-- 侧边栏 -->
        <aside-layout></aside-layout>

        <!-- 主内容区 -->
        <el-main>
          <!-- 出售统计图表 -->
          <el-card class="sell-stats-card">
            <div slot="header" class="clearfix">
              <span>出售统计</span>
            </div>
            <div ref="chart" style="width: 100%; height: 300px;"></div>
          </el-card>

          <!-- 出售记录列表 -->
          <el-card class="sell-history-card" style="margin-top: 20px;">
            <div slot="header" class="clearfix">
              <span>出售记录</span>
            </div>
            <!-- 搜索框和筛选 -->
            <el-row :gutter="20" style="margin-bottom: 20px;">
              <el-col :span="8">
                <el-input v-model="searchQuery" placeholder="请输入书名或订单号" clearable @clear="fetchSellHistory">
                  <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-select v-model="selectedStatus" placeholder="选择状态" @change="fetchSellHistory" style="width: 100%;">
                  <el-option label="所有状态" value=""></el-option>
                  <el-option label="已完成" value="已完成"></el-option>
                  <el-option label="待支付" value="待支付"></el-option>
                  <el-option label="已取消" value="已取消"></el-option>
                  <el-option label="待发货" value="待发货"></el-option>
                  <el-option label="已发货" value="已发货"></el-option>
                </el-select>
              </el-col>
            </el-row>

            <!-- 出售记录列表 -->
            <el-table
              :data="filteredSellHistory"
              style="width: 100%; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);"
              @row-click="handleRowClick"
              :row-style="{ cursor: 'pointer' }"
              :header-cell-style="{ background: '#f5f7fa', color: '#333', fontWeight: 'bold' }"
              :cell-style="{ padding: '12px 8px' }"
            >
              <el-table-column prop="orderId" label="订单号" width="150"></el-table-column>
              <el-table-column prop="bookName" label="书名" width="200"></el-table-column>
              <el-table-column prop="sellTime" label="出售时间" width="180"></el-table-column>
              <el-table-column prop="price" label="价格" width="120"></el-table-column>
              <el-table-column prop="status" label="状态" width="120"></el-table-column>
              <el-table-column prop="note" label="备注" width="200"></el-table-column>
              <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleViewDetails(scope.row)">查看详情</el-button>
                  <el-button type="text" @click="handleCancelOrder(scope.row)">取消订单</el-button>
                  <el-button type="text" @click="handleConfirmShipment(scope.row)">确认发货</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalOrders"
              style="margin-top: 20px;"
            ></el-pagination>
          </el-card>
        </el-main>
      </el-container>

      <!-- 订单详情弹窗 -->
      <el-dialog title="订单详情" :visible.sync="detailDialogVisible" width="50%">
        <div v-if="selectedOrder">
          <p><strong>订单号:</strong> {{ selectedOrder.orderId }}</p>
          <p><strong>书名:</strong> {{ selectedOrder.bookName }}</p>
          <p><strong>出售时间:</strong> {{ selectedOrder.sellTime }}</p>
          <p><strong>价格:</strong> {{ selectedOrder.price }}元</p>
          <p><strong>状态:</strong> {{ selectedOrder.status }}</p>
          <p><strong>备注:</strong> {{ selectedOrder.note }}</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import AsideLayout from '../../layout/AsideLayout.vue';
import * as echarts from 'echarts';

export default {
  components: { AsideLayout },
  data() {
    return {
      searchQuery: '', // 搜索框内容
      selectedStatus: '', // 选择的订单状态
      sellHistory: [
        { orderId: '2001', bookName: 'JavaScript 高级程序设计', sellTime: '2023-10-01 10:30', price: 80.00, status: '已完成', note: '' },
        { orderId: '2002', bookName: '算法导论', sellTime: '2023-09-15 14:20', price: 120.00, status: '待支付', note: '' },
        { orderId: '2003', bookName: 'Python 编程', sellTime: '2023-08-20 09:10', price: 70.00, status: '已完成', note: '' },
        { orderId: '2004', bookName: 'Java 编程思想', sellTime: '2023-07-10 16:45', price: 100.00, status: '已取消', note: '' },
        { orderId: '2005', bookName: '红楼梦', sellTime: '2023-06-01 11:00', price: 50.00, status: '已完成', note: '' }
      ],
      currentPage: 1,
      pageSize: 10,
      totalOrders: 5,
      detailDialogVisible: false, // 订单详情弹窗的显示状态
      selectedOrder: null // 当前选中的订单
    };
  },
  computed: {
    // 根据搜索和筛选过滤出售记录
    filteredSellHistory() {
      let orders = this.sellHistory;

      // 搜索过滤
      if (this.searchQuery) {
        orders = orders.filter(order => order.bookName.includes(this.searchQuery) || order.orderId.includes(this.searchQuery));
      }

      // 状态过滤
      if (this.selectedStatus) {
        orders = orders.filter(order => order.status === this.selectedStatus);
      }

      return orders;
    }
  },
  methods: {
    fetchSellHistory() {
      // 模拟获取出售记录数据
      this.totalOrders = this.sellHistory.length;
    },
    handleSearch() {
      console.log('搜索出售记录：', this.searchQuery);
      this.fetchSellHistory();
    },
    handleViewDetails(row) {
      this.selectedOrder = row;
      this.detailDialogVisible = true;
    },
    handleCancelOrder(row) {
      row.status = '已取消';
      this.$message.success('订单已取消');
    },
    handleConfirmShipment(row) {
      row.status = '已发货';
      this.$message.success('订单已确认发货');
    },
    handleSizeChange(size) {
      this.pageSize = size;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    handleRowClick(row) {
      this.selectedOrder = row;
      this.detailDialogVisible = true;
    },
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        title: {
          text: '出售统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '出售状态',
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.sellHistory.filter(order => order.status === '已完成').length, name: '已完成' },
              { value: this.sellHistory.filter(order => order.status === '待支付').length, name: '待支付' },
              { value: this.sellHistory.filter(order => order.status === '已取消').length, name: '已取消' },
              { value: this.sellHistory.filter(order => order.status === '待发货').length, name: '待发货' },
              { value: this.sellHistory.filter(order => order.status === '已发货').length, name: '已发货' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      chart.setOption(option);
    }
  },
  mounted() {
    this.fetchSellHistory();
    this.initChart();
  }
};
</script>

<style scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  font-weight: bold;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-right a {
  margin-right: 20px;
  color: #333;
  text-decoration: none;
}

.sell-history-card, .sell-stats-card {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.el-table {
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.el-table__header th {
  background-color: #f5f7fa;
  color: #333;
  font-weight: bold;
}

.el-table__body tr:hover {
  background-color: #f0f9eb;
}

.el-pagination {
  margin-top: 20px;
}
</style>